import BDashboardAddWidget from '@/components/storybook/b-dashboard-add-widget/index'
import { getGadget, useGadgetSetting, isSlicer } from '@/components/storybook/hooks/useGadget'
import { isFunction } from 'lodash'

const EVENTS = {
  getGadget,
  useGadgetSetting,
  isSlicer
}

export default {
  components: {
    BDashboardAddWidget
  },
  data () {
    return {
      targetGadgets: [],
      sourceGadgets: [],
      gadgetStatus: [],
      gadgetChoiceModalVisible: false,
      loading: false,
      ...EVENTS
    }
  },
  computed: {
    dashboardId () {
      const { pageid } = this.$route.query
      if (pageid) {
        return pageid
      }

      if (this.$route.path === '/home') {
        return 'home'
      }

      return null
    }

  },

  methods: {

    resizedEvent (i, newH, newW, newHPx, newWPx) {
      const [element] = this.getGadgetRef(i)
      if (element && isFunction(element.resized)) {
        element.resized(i, newH, newW, newHPx, newWPx)
      }
    },
    onMouseEnterGrid (item) {
      if (this.editMode) {
        this.$set(item, 'showSetting', 'show')
      }
    },
    onMouseLeaveGrid (item) {
      if (this.editMode) {
        this.$delete(item, 'showSetting')
      }
    },
    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
      const [element] = this.getGadgetRef(i)
      if (element && isFunction(element.resized)) {
        element.resized(i, newH, newW, newHPx, newWPx)
      }
      if (element && isFunction(element.containerResizedEvent)) {
        element.containerResizedEvent(i, newH, newW, newHPx, newWPx)
      }
    },
    openGadgetChoiceModal () {
      this.gadgetChoiceModalVisible = true
    },
    openDashboardChoiceModal () {
      this.dashboardChoiceModalVisible = true
    },
    deleteGadget (gadget) {
      const { i: gadgetId } = gadget
      const index = this.targetGadgets.findIndex(item => item.i === gadgetId)
      if (index !== -1) {
        this.targetGadgets.splice(index, 1)
      }
    },
    appendGadget (gadget) {
      const { i: gadgetId } = gadget
      const index = this.targetGadgets.findIndex(item => item.i === gadgetId)
      if (index === -1) {
        this.targetGadgets.unshift(gadget)
        return
      }
      this.targetGadgets.splice(index, 1, gadget)
    },
    getGadgetRef (gadgetId) {
      const index = this.targetGadgets.findIndex(item => item.i === gadgetId)
      if (index !== -1 && this.$refs.gadgets) {
        return [this.$refs.gadgets[index], index]
      }
      return []
    },
    saveGadgets () {

    },
    getGadgetStatus () {
      return this.targetGadgets.map(({ com, i, gadgetType = '' }) => {
        let gadgetStatus = 'init'
        if (!this.isSlicer(com)) {
          gadgetStatus = 'ready'
        }

        return {
          id: i,
          gadgetStatus,
          gadgetType,
          loadingStatus: false
        }
      })
    },
    getGadgets () {
      return this.sourceGadgets.map(({ static: state, com, ...rest }) => {
        if (com === 'pageheadergadget' || com === 'pageheadergadgetnexticket') {
          rest.h = 3
          rest.static = true
        }

        return {
          ...rest,
          h: rest.h < 2 ? 2 : rest.h,
          com
        }
      })
    },
    async init () {
      try {
        this.loading = true

        const [dashboard] = await Promise.all([this.getDashboard()])

        this.dashboard = dashboard
        const gadgets = dashboard.contentNew || []
        this.sourceGadgets = gadgets
        this.targetGadgets = this.getGadgets()

        if (isFunction(this.afterInitSuccess)) {
          await this.afterInitSuccess()
        }
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    async getDashboard () {
      const sourceTenantCode = window.sessionStorage.getItem('isMySelfCode') ? window.sessionStorage.getItem('isMySelfCode') : this.$store.state.user.tenantCode
      const params = {
        businessId: this.dashboardId
      }

      if (this.$store.state.contentTabsActiveName === 'home' && (this.$route.path.includes('dashboard-') || this.$route.path.includes('scorecard-'))) {
        params.businessId = 'home'
      }
      if (this.$store.state.contentTabsActiveName === 'home' && this.$store.state.user.homePage) {
        params.businessId = this.$store.state.user.homePage
      }
      const { getDashboardLayout } = this.$interface.reports
      const { data: response } = await getDashboardLayout(params, sourceTenantCode)
      if (response.code !== 0) {
        throw response.msg
      }
      return response.data || {}
    }
    // async getPermission () {
    //   const { getAssert } = this.$interface.system
    //   const params = {
    //     sourceId: this.dashboardId,
    //     sourceType: 0
    //   }
    //   const { data: response } = await getAssert(params)
    //   if (response.code === 403) {
    //     // eslint-disable-next-line no-throw-literal
    //     throw 'no permission'
    //   }
    //   return response
    // },
    // async getPaidProduct () {
    //   const { getPaidProduct } = this.$interface.pay
    //   const {
    //     data: response
    //   } = await getPaidProduct()
    //   if (response.code !== 0) {
    //     throw response.msg
    //   }
    //   InterceptContext.paidProducts = response.data
    // }
  }
}
